/*
 * @Author: 张笑天
 * @Date: 2018-03-07 17:09:41
 * @Last Modified by: lyuan2018
 * @Last Modified time: 2020-08-19 16:50:46
 */
import React from 'react';
import { Popover } from 'antd';
import { WeaNewScroll, WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
export default class PopoverGroup extends React.Component {
  constructor(props) {
    super(props);
    this.prefixClass = 'wea-email-new-popover-group';
    this.id = `weaEmailNewPopoverGroup_${Math.random()
      .toString(36)
      .substr(2, 6)}`;
    this.isInstanceMounted = false;
  }
  componentDidMount() {
    this.isInstanceMounted = true;
  }
  componentWillUnmount() {
    this.isInstanceMounted = false;
  }
  hide = () => {
    this.refs.popover.refs.tooltip.setState({ visible: false });
  };
  onSelect(data) {
    const { tagKey, onSelect } = this.props;
    typeof onSelect === 'function' && onSelect(tagKey, data);
    this.hide();
  }
  getProps() {
    const { hasAll, allInfo, hrmGroup, emailCreateGroupStore } = this.props;
    return {
      ref: 'popover',
      trigger: 'click',
      overlayClassName: `${this.prefixClass}`,
      placement: 'bottomRight',
      content: (
        <div className={`${this.prefixClass}-content`} id={this.id}>
          {hasAll ? (
            <div
              className={`${this.prefixClass}-content-all`}
              onClick={() => this.onSelect(allInfo)}
            >
              {allInfo.name}
            </div>
          ) : null}
          <div
            className={`${this.prefixClass}-content-list-wrap`}
            style={{ height: (hrmGroup.length > 4 ? 4 : hrmGroup.length) * 52 }}
          >
            <WeaNewScroll
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_WeaNewScroll@3hni00`}
              height="100%"
            >
              <ul className={`${this.prefixClass}-content-list`}>
                {hrmGroup.map(item => (
                  /* eslint-disable */
                  <li onClick={() => this.onSelect(item)} key={item.id}>
                    {/* eslint-enable */}
                    <p>{`${item.lastname} ( ${item.users.length} )`}</p>
                    <p style={{ color: '#bfbfc0' }} title={item.names}>
                      {item.names}
                    </p>
                  </li>
                ))}
              </ul>
            </WeaNewScroll>
          </div>
          <div
            className={`${this.prefixClass}-content-add`}
            onClick={() => {
              emailCreateGroupStore &&
                emailCreateGroupStore.setState({
                  visible: true,
                });
            }}
          >
            <i
              title={getLabel(124815, '添加常用组')}
              className="icon-coms-Add-to"
            />
            {getLabel(124815, '添加常用组')}
          </div>
        </div>
      ),
    };
  }
  render() {
    return (
      <Popover
        ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@wn03fi`}
        {...this.getProps()}
      >
        {this.props.children}
      </Popover>
    );
  }
}
